<template>
  <div class="reply">
    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
    <!-- 评论 -->
    <van-cell title="当前评论"></van-cell>
    <comment :isReply="true" :item="currentComment" />
    <!-- 回复 -->
    <van-cell title="评论的回复"></van-cell>
    <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
    <comment v-for="(item, index) in replyList" :key="index" :isReply="true" :item="item" />
    </van-list>
    <!-- 添加回复 -->
    <write :isReply="true" :commid="currentComment.com_id" @replyPass="replyPass" />
    </van-popup>
  </div>
</template>

<script>
import { apiReply } from '@/api/comment.js'
import bus from '@/utils/mybus.js'
import comment from './comment'
import write from './write'
export default {
  components: {
    comment,
    write
  },
  data () {
    return {
      show: false,
      // 当前评论数据
      currentComment: {},
      loading: false,
      finished: false,
      // 定义分页标识
      offset: null,
      // 页容量
      limit: 10,
      // 定义完结标识
      endid: null,
      // 评论的结果
      replyList: []
    }
  },
  methods: {
    async onLoad () {
      const res = await apiReply({
        commid: this.currentComment.com_id.toString(),
        offset: this.offset,
        limit: this.limit
      })
      window.console.log('回复:', res)
      this.replyList = [...this.replyList, ...res.data.data.results]
      this.offset = res.data.data.last_id
      this.endid = res.data.data.end_id
      // list加载状态
      this.loading = false
      // 判断是否加载完毕
      if (this.offset === this.endid) {
        this.finished = true
      }
    },

    // 添加评论回复
    replyPass (myComment) {
      this.replyList.unshift(myComment)
      // 评论数+1
      this.currentComment.reply_count += 1
    }
  },
  created () {
    // 监听bus事件
    bus.$on('passval', value => {
      this.currentComment = value
      // 清空其他数据解决回复内容在其他评论显示
      this.loading = false
      this.finished = false
      this.offset = null
      this.endid = null
      this.replyList = []
    })
  }
}
</script>

<style>

</style>
